<template>
  <ul>
    <li :class="{ active: modelValue === 'poor' }">
      <button
        type="button"
        @click="activate('poor')"
        :class="{ active: modelValue === 'poor' }"
      >
        Poor
      </button>
    </li>
    <li :class="{ active: modelValue === 'average' }">
      <button
        type="button"
        @click="activate('average')"
        :class="{ active: modelValue === 'average' }"
      >
        Average
      </button>
    </li>
    <li :class="{ active: modelValue === 'great' }">
      <button
        type="button"
        @click="activate('great')"
        :class="{ active: modelValue === 'great' }"
      >
        Great
      </button>
    </li>
  </ul>
</template>

<script>
export default {
  props: ['modelValue'],
  emits: ['update:modelValue'],
  // data() {
  //   return {
  //     activeOption: this.modelValue,
  //   };
  // },
  // computed: {
  //   activeOption() {
  //     return this.modelValue;
  //   },
  // },
  methods: {
    activate(option) {
      this.$emit('update:modelValue', option);
    },
  },
};
</script>

<style scoped>
.active {
  border-color: blueviolet;
}

.active button {
  color: blueviolet;
}

ul {
  list-style: none;
  margin: 0.5rem 0;
  padding: 0;
  display: flex;
}

li {
  margin: 0 1rem;
  border: 2px solid gray;
  padding: 1rem;
  display: flex;
  align-items: center;
}

button {
  font: inherit;
  border: none;
  background: transparent;
  cursor: pointer;
}
</style>
